<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      body {
        /* margin: auto ; */
        display: flex;
        margin: 20px auto;
      }
      .container {
        width: 1000px;
        height: 600px;
        margin: 50px auto;
        /* display: flex; */
        /* 下面一行代码解决img标签默认存在间隙的问题 */
        /* font-size: 0; */
        /* background-color: blanchedalmond; */
        .left-img {
          position: relative;
          display: inline-block;
          width: 450px;
          height: 450px;
          background-image: url("./images/imgA_2.jpg");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          background-color: rgb(251, 229, 196);
          .mask {
            width: 230px;
            height: 230px;
            background-image: url("./images/bg.png");
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        .right-img {
          display: inline-block;
          width: 450px;
          height: 450px;
          /* background-color: cadetblue; */
          background-image: url("./images/imgA_3.jpg");
          background-repeat: no-repeat;
        }
        .img-list-wrapper {
          width: 450px;
          height: 100px;
          /* background-color: blueviolet; */
          text-align: center;
          .img-list {
            li {
              display: inline-block;
              width: 60px;
              height: 60px;
              margin: 0 5px;
              background-image: url("./images/imgA_1.jpg");
              /* border: 2px solid #000; */
            }
          }
        }
      }
    </style>
  </head>
  <body>
    <!-- 最外层容器 -->
    <div class="container">
      <!-- 左侧原图 -->
      <div class="left-img">
        <!-- 遮罩层 -->
        <div class="mask"></div>
      </div>
      <!-- 右侧大图 -->
      <div class="right-img"></div>
      <!-- 缩略图 -->
      <div class="img-list-wrapper">
        <ul class="img-list"></ul>
      </div>
    </div>

    <script>
      window.onload = function () {
        // 图片数据
        var imgs = {
          sm: ["imgA_1.jpg", "imgB_1.jpg", "imgC_1.jpg"],
          md: ["imgA_2.jpg", "imgB_2.jpg", "imgC_2.jpg"],
          lg: ["imgA_3.jpg", "imgB_3.jpg", "imgC_3.jpg"],
        };

        // DOM查询工具函数封装
        function $(selector) {
          return document.querySelector(selector);
        }

        function $$(selector) {
          return document.querySelectorAll(selector);
        }

        // 获取需要用到的DOM对象
        var container = $(".container");
        var leftImg = $(".left-img");
        var mask = $(".mask");
        var rightImg = $(".right-img");
        var imgListWrapper = $(".img-list-wrapper");
        var imgList = $(".img-list");

        // 默认显示所有的缩略图
        var str = "";
        for (var i = 0; i < imgs.sm.length; i++) {
          var item = imgs.sm[i];
          str += `<li style="background-image: url('./images/${item}');"></li>`;
        }
        imgList.innerHTML = str;
        // 默认第一个缩略图高亮
        imgList.children[0].style.border = "2px solid #000";

        // 给每个缩略图绑定点击事件
        imgList.addEventListener("click", function (e) {
          if (e.target.tagName.toUpperCase() === "LI") {
            // 事件委托
            // 排他思想
            var lis = $$("li");
            // 把所有的li标签高亮清除
            for (var i = 0; i < lis.length; i++) {
              // 把所有li标签的边框清除
              lis[i].style.border = "none";
            }
            // 给点击的li标签添加border
            e.target.style.border = "2px solid #000";
            // console.dir(e.target)

            // 点击缩略图，左侧图切换相应的图片
            // 找到当前图片的索引
            var index = 0;
            for (var i = 0; i < lis.length; i++) {
              console.log(lis[i].style.border);
              if (lis[i].style.border === "2px solid rgb(0, 0, 0)") {
                index = i;
              }
            }
            // 通过缩略图当前索引给左图和右图设置指定的背景图
            leftImg.style.backgroundImage = `url('./images/${imgs.md[index]}')`;
            rightImg.style.backgroundImage = `url('./images/${imgs.lg[index]}')`;
          }
        });

        // 监听左侧图片鼠标移动
        // 移入
        leftImg.onmousemove = function (e) {
          mask.style.opacity = 1;
          rightImg.style.opacity = 1;
          //根据鼠标位置计算遮罩的left，top
          // 为什么要减mask.offsetWidth / 2？？
          // 为了获取mask的left
          var left = e.clientX - leftImg.offsetLeft - mask.offsetWidth / 2;
          var top = e.clientY - leftImg.offsetTop - mask.offsetHeight / 2;

          // 处理边界
          if (left < 0) left = 0;
          if (top < 0) top = 0;
          if (left >= leftImg.offsetWidth - mask.offsetWidth)
            left = leftImg.offsetWidth - mask.offsetWidth;
          if (top >= leftImg.offsetHeight - mask.offsetHeight)
            top = leftImg.offsetHeight - mask.offsetHeight;

          // 根据left和top修改遮罩
          mask.style.left = left + "px";
          mask.style.top = top + "px";

          // 修改大图的位
          rightImg.style.backgroundPositionX = -2 * left + "px";
          rightImg.style.backgroundPositionY = -2 * top + "px";
        };
        // 移出
        leftImg.onmouseleave = function (e) {
          mask.style.opacity = 0;
          rightImg.style.opacity = 0;
        };
      };
    </script>
  </body>
</html>
